@import url('./../../../../assets/css/common.less');
#shopwrap {
    background: #fff url("./../../../../assets/imgs/shop/bg_hd_top.png") no-repeat 0 0;
    background-size: 7.5rem 3.39rem;
    .test {
        opacity: 1;
        position: fixed;
        right: 0;
        bottom: 1.3rem;
        z-index: 2000;
        background-color: #ccc;
       
        a {
            color: #000;
            float: left;
            margin: 0 5px;
            cursor: pointer;
        }
    }


    .header {
        // padding-top: 0.1rem;
        padding-top: 0.55rem;
        height: 0.7rem;
        position: relative;
        .lefticon {
            float: left;
            height: 0.6rem;
            width: 0.57rem;
            padding-left: 0.4rem;
        }

        .searchbtn {
            width: 5.44rem;
            height: 0.7rem;
            margin-left: .2rem;
            border-radius: 0.29rem;
            box-sizing: border-box;
            padding: 0.2rem 0 0.082rem 0.2rem;
            background-color: rgba(239, 239, 239, 1);

            img {
                float: left;
                width: 0.32rem;
                height: 0.32rem;
                margin-right: 0.082rem;
            }

            p {
                color: rgba(102, 102, 102, 1);
                height: 0.398rem;
                line-height: 0.398rem;
                float: left;
                width: 4.35rem;
            }

            .list-item {
                margin: 0;
                transition: all 1s;
                overflow: hidden;
            }


            .list-enter {
                transform: translateY(30px);
            }

            .list-enter-to,
            .list-leave {
                transform: translateY(0);
            }

            .list-leave-to {
                transform: translateY(-30px)
            }

            .list-leave-active {
                position: absolute;
                width: 0;
            }
        }

        .hd_rt{
            position: absolute;
            right: 0.35rem;
            top: 0.55rem;
            .xunbao{
                display: inline-block;
                margin-left: .26rem;
                .im{
                    display: block;
                    width: .42rem;
                    height: .42rem;
                    img{
                        width: 100%;
                    }
                }
                .t{
                    font-size: .22rem;
                    font-family:PingFang SC;
                    font-weight:500;
                    color:rgba(31,31,31,1);
                    margin-top: .05rem;
                }
            }
        }    

        .rightbtn {
            display: block;
            position: absolute;
            right: 0.2rem;
            // top: 0.15rem;
            top: 0.55rem;
            height: 0.42rem;
            width: 0.42rem;
            overflow: hidden;

            img {
                position: absolute;
                left: 0;
                top: 0;
                width: 0.6rem;
                height: 0.58rem;
            }
            &::after{
                content: '';
                width: 0.15rem;
                height:0.15rem;
                border-radius:50%;
                background-color: red;
                position: absolute;
                top:0;
                right:0;
                display:none;
            }
        }
    }

    .navbar {
        padding: 0.1rem 0 0.03rem;
        height: 0.92rem;
        box-sizing: border-box;
        width: 100%;
    }

    .swiper {
        margin:.2rem .2rem 0;
        .swiperdom {
            height: 3.12rem;
            .van-swipe-item{
                border-radius: .12rem;
            }
            img {
                width: 100%;
                height: 100%;
                border-radius: .12rem;
            }
        }
    }

    .tipsbox {
        display: flex;
        padding: 0 0.45rem;
        justify-content: space-between;
        padding-top: .27rem;
        img {
            float: left;
            height: 0.26rem;
            width: 0.26rem;
            margin-right: 0.08rem;
        }

        span {
            float: left;
            font-size: 0.22rem;
            color:#757575;
        }
    }

    .guild-area{
        padding: .23rem .2rem 0;
        ul{
            overflow: hidden;
            li{
                float: left;
                width: 20%;
                padding-top: .2rem;
                span{
                    display: block;
                }
                .m{
                    width: .8rem;
                    height: .8rem;
                    margin: 0 auto;
                    img{
                        width: 100%;
                    }
                }
                .t{
                    font-size: .26rem;
                    font-family:PingFang SC;
                    font-weight:500;
                    color:rgba(117,117,117,1);
                    text-align: center;
                    margin-top: .15rem;
                }
            }
        }
    }

    .index_list_recommend{
        padding: .3rem .2rem 1rem;
        background:rgba(247,247,247,1);
        margin-top: .56rem;
        border-radius: .3rem .3rem 0 0;
    }

    .title{
        font-size: .34rem;
        font-family:PingFang SC;
        font-weight:800;
        color:rgba(31,31,31,1);
        .ic{
            display: inline-block;
            width: .05rem;
            height: .3rem;
            background:rgba(255,219,61,1);
            border-radius: .03rem;
            vertical-align: middle;
            margin-right: .1rem;
            margin-top: -.04rem;
        }
    }
    .tzj .title{margin-bottom: .3rem;}

    .goldprice {
        position: relative;
        margin: 0 auto 0.21rem;
        width: 6.98rem;
        height: 0.76rem;

        .bg {
            position: absolute;
            // left: 0.24rem;
            top: 0;
            height: 0.76rem;
            // width: auto;
            width: 100%;
        }
        &>span{
            display: block;
            position: relative;
            left: 1.7rem;
            width: 5rem;
            color: #FFFFFF;
            overflow: hidden;
            z-index: 10;
            color: #fff;
            font-size: 0.24rem;
            line-height: 0.86rem;
            overflow: hidden;
            height: 0.76rem;
        }
        .goldmassbox {
            position: absolute;
            left: 1.78rem;
            top: 0;
            z-index: 10;
            color: #fff;
            font-size: 0.24rem;
            line-height: 0.86rem;
            overflow: hidden;
            height: 0.76rem;
            width: 4rem;
            
            // span {
            //     display: block;
            //     float: right;
            //     width: 0.17rem;
            //     height: 0.2rem;
            //     margin-top: 0.3rem;

            //     img {
            //         width: 100%;
            //         height: 100%;
            //     }
            // }


        }
        .goldmassbox .list-item {
            position: absolute;
            left: 0;
            width: 100%;
        }
        
        .goldmassbox>div>span {
            float: left;
        }
        
        .goldmassbox>div>.szicon {
            display: block;
            float: left;
            width: 0.17rem;
            height: 0.2rem;
            margin-top: 0.3rem;
            margin-left: 0.2rem;
        }
        
        .goldmassbox>div>.szicon img {
            width: 100%;
            height: 100%;
        }
    }

    .hot_push {
        // padding: 0 0.25rem;
        box-sizing: border-box;
        border: 1px solid rgba(212, 212, 212, 1);
        width: 7rem;
        margin: 0 auto;
        display: flex;
        justify-content: space-around;
        .hot_pushli {
            position: relative;
            width: 50%;
            // height: 2.62rem;
            padding-top: 0.15rem;
            box-sizing: border-box;

            &>p {
                font-size: 0.32rem;
                font-weight: bold;
                text-align: center;
                color: rgba(51, 51, 51, 1);
                line-height: 0.43rem;
                height: 0.43rem;
                margin-bottom: 0.02rem;
                width: 2rem;
                margin: 0 auto;
            }

            &>span {
                font-size: 0.2rem;
                display: block;
                text-align: center;
                color: rgba(136, 136, 136, 1);
                line-height: 0.4rem;
                height: 0.4rem;
                width: 2rem;
                margin: 0 auto;
            }

            // 人气爆款与每日推荐（旧）
            // .list {
            //     display: flex;
            //     justify-content: space-around;

            //     .li {
            //         padding: 0.2rem 0 0.1rem;
            //         width: 50%;

            //         img {
            //             height: 0.9rem;
            //             width: auto;
            //             margin: 0 auto;
            //         }

            //         p {
            //             text-align: center;
            //             color: rgba(219, 49, 42, 1);
            //             font-size: 0.32rem;
            //             line-height: 0.43rem;
            //         }
            //     }
            // }

            // 人气爆款与每日推荐（新）
            .list {
                .li {
                    // padding: 0.1rem 0rem;
                    padding:0rem;
                    display: flex;
                    justify-content: space-around;
                    .liimg {
                        padding: 0.1rem 0 0.1rem;
                        width: 50%;

                        img {
                            height: 1.2rem;
                            width: 1.2rem;
                            // width: auto;
                            margin: 0 auto;
                        }
                        p {
                        text-align: center;
                        color: rgba(219, 49, 42, 1);
                        font-size: 0.32rem;
                        line-height: 0.43rem;
                        }
                        span{
                            text-align: center;
                            color: rgba(219, 49, 42, 1);
                            font-size: 0.2rem;
                            display: block;
                        }
                    }


                    
                }
            }
        }

        .left {
            &::after {
                content: '';
                position: absolute;
                width: 1px;
                height: 100%;
                background-color: rgba(212, 212, 212, 1);
                right: -0.5px;
                top: 0;
            }
        }
    }

    .filterbox {
        position: relative;
        border-bottom: 1px solid rgba(212, 212, 212, 1);

        .topbox {
            display: flex;
            justify-content: space-between;
            padding: 0.3rem 0.34rem 0.25rem;

            .top {
                line-height: 0.31rem;
                height: 1em;
                font-size: 0.26rem;

                span {
                    float: left;
                    color: rgba(51, 51, 51, 1);
                    margin-right: 0.1rem;
                    height: 1em;
                }

                img {
                    float: left;
                    height: 1em;
                }

                .imgxz {
                    -webkit-transform: rotate(180deg);
                    -moz-transform: rotate(180deg);
                    -o-transform: rotate(180deg);
                    -ms-transform: rotate(180deg);
                    transform: rotate(180deg);
                }
            }
        }

        .style {
            &.select {
                display: block;
            }

            display: none;
            position: absolute;
            padding: 0 0.25rem;
            left: 0;
            top: calc(100% + 1px);
            z-index: 10;
            width: 100%;
            box-sizing: border-box;
            background-color: #fff;
            box-shadow: 0 1px 0.04rem 0 rgba(0, 0, 0, 0.12);

            p {
                width: 100%;
                padding-left: 0.11rem;
                box-sizing: border-box;
                border-bottom: 1px solid rgba(222, 222, 222, 1);

                &:last-child {
                    border-bottom: none;
                }

                span {
                    float: left;
                    height: 0.87rem;
                    line-height: 0.87rem;
                }

                img {
                    float: left;
                    margin-left: 0.11rem;
                    height: 0.31rem;
                    padding-top: 0.28rem;
                }
            }
        }
    }

    /*tuijian and zhibo list css*/
    .list {
        .goodslist {
            min-height: 1rem;
            padding: 0 0 0;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            .goodsli {
                width: 3.45rem;
                min-height: 5.16rem;
                overflow: hidden;
                margin-top: 0.25rem;
                border-radius: .12rem;
                background:rgba(255,255,255,1);
                position: relative;
                cursor: pointer;
                .im{
                    width: 3.45rem;
                    height: 5.16rem;
                    border-radius: .12rem;
                    &>img {
                        width: 100%;
                        height: 100%;
                        border-radius: .12rem;
                    }
                }
                .goodsli_title {
                    position: absolute;
                    left: .2rem;
                    top:.2rem;
                    .img_w{
                        position: absolute;
                        left: 0;
                        top: 0;
                        display: block;
                        height: 0.6rem;
                        width: 0.6rem;
                        border-radius:50%;
                        img {
                            width: 100%;
                            height: 100%; 
                            border-radius:50%;
                        }
                    }
                    
                    h2 {
                        display: block;
                        width: 3.05rem;
                        height: 0.6rem;
                        line-height:  0.6rem;
                        font-size: 0.28rem;
                        color: rgba(21, 21, 21, 1);
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        &.indent {
                            text-indent: 0.7rem;
                        }
                    }
                }

                .tit{
                    display: block;
                    font-size: .26rem;
                    font-family:PingFang SC;
                    font-weight:bold;
                    color:rgba(31,31,31,1);
                    margin-top: .22rem;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical;
                    position: absolute;
                    left: .2rem;
                    bottom: .8rem;
                }

                .gd_btm{
                    position: absolute;
                    left: .2rem;
                    bottom: .2rem;
                    span{
                        display: inline-block;
                    }
                    .huifang,
                    .zb{
                        width: .96rem;
                        height: .3rem;
                        vertical-align: middle;
                    }
                    .zb{
                        background: url("./../../../../assets/imgs/shop/zhibo.png") no-repeat 0 0;
                        background-size: .96rem .3rem;
                    }
                    .huifang{
                        background: url("./../../../../assets/imgs/shop/huifang.png") no-repeat 0 0;
                        background-size: .96rem .3rem;
                    }
                    .num{
                        font-size: .2rem;
                        font-family:PingFang SC;
                        font-weight:400;
                        color:rgba(117,117,117,1);
                        line-height: .4rem;
                         margin-left: .15rem;
                    }
                }

                .zan{
                    width: .6rem;
                    height: .6rem;
                    background: url("./../../../../assets/imgs/shop/zan.png") no-repeat 0 0;
                    background-size: .6rem .6rem;
                    position: absolute;
                    right: .13rem;
                    bottom: .13rem;
                    cursor: pointer;
                }

                .goodsli_pricebox {
                    // margin-top: 0.06rem;

                    &>* {
                        float: left;
                    }

                    p {
                        font-size: 0.28rem;
                        color: rgba(219, 49, 42, 1);
                        // line-height: 0.61rem;
                        line-height: 0.51rem;
                        font-weight: bold;
                        height: 0.51rem;
                        margin-right: 0.14rem;
                    }

                    .bytips {
                        background-color: rgba(254, 216, 180, 1);
                        color: rgba(226, 99, 33, 1);
                        margin-top: 0.085rem;
                        margin-right: 0.13rem;
                        border-radius: 0.06rem;
                        font-size: 0.22rem;
                    }

                    .zstips {
                        border: 1px solid rgba(147, 90, 144, 1);
                        text-align: center;
                        line-height: 0.34rem;
                        color: rgba(147, 90, 144, 1);
                        border-radius: 50%;
                        width: 0.34rem;
                        height: 0.34rem;
                        margin-top: 0.085rem;
                        font-size: 0.12rem;
                    }
                }

                .goodsli_numberbox {
                    display: flex;
                    justify-content: space-between;
                    width: 2.8rem;
                    min-width: 140px;
                    flex-wrap: nowrap;
                    padding: 0.1rem 0rem;

                    span {
                        font-size: 0.22rem;
                        color: rgba(145, 145, 145, 1);
                        line-height: 0.29rem;
                        height: 0.29rem;
                    }
                }

                .goodsli_linksbox {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    height: 0.3rem;
                    box-sizing: border-box;
                    padding-right: 0.08rem;

                    .shop {
                        font-size: 0.22rem;
                        color: rgba(194, 107, 68, 1);
                        line-height: 0.3rem;
                        cursor: pointer;
                    }

                    .details {
                        font-size: 0.22rem;
                        color: rgba(147, 147, 147, 1);
                        line-height: 0.3rem;
                        cursor: pointer;
                    }
                }
            }
        }
    }

    /*touzijin list css*/
    .tzj-list {
        .goodslist {
            padding: 0 0 0;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            .show-flag-living {
                width: 3.45rem;
                overflow: hidden;
                margin-top: 0.25rem;
                border-radius: .12rem;
                background:rgba(255,255,255,1);
                position: relative;
                .im{
                    width: 3.45rem;
                    min-height: 5.65rem;
                    border-radius: .12rem;
                    &>img {
                        width: 100%;
                        height: 100%;
                        border-radius: .12rem;
                    }
                }
                .goodsli_title {
                    position: absolute;
                    left: .2rem;
                    top:.2rem;
                    .img_w{
                        position: absolute;
                        left: 0;
                        top: 0;
                        display: block;
                        height: 0.6rem;
                        width: 0.6rem;
                        border-radius:50%;
                        img {
                            width: 100%;
                            height: 100%; 
                            border-radius:50%;
                        }
                    }
                    
                    h2 {
                        display: block;
                        width: 3.05rem;
                        height: 0.6rem;
                        line-height:  0.6rem;
                        font-size: 0.28rem;
                        color: rgba(21, 21, 21, 1);
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        &.indent {
                            text-indent: 0.7rem;
                        }
                    }
                }

                .tit{
                    display: block;
                    font-size: .26rem;
                    font-family:PingFang SC;
                    font-weight:bold;
                    color:rgba(31,31,31,1);
                    margin-top: .22rem;
                    padding: 0 .2rem;
                    position: absolute;
                    left: .2rem;
                    bottom: .8rem;
                }

                .gd_btm{
                    position: absolute;
                    left: .2rem;
                    bottom: .2rem;
                    span{
                        display: inline-block;
                    }
                    .huifang,
                    .zb{
                        width: .96rem;
                        height: .3rem;
                        vertical-align: middle;
                    }
                    .zb{
                        background: url("./../../../../assets/imgs/shop/zhibo.png") no-repeat 0 0;
                        background-size: .96rem .3rem;
                    }
                    .huifang{
                        background: url("./../../../../assets/imgs/shop/huifang.png") no-repeat 0 0;
                        background-size: .96rem .3rem;
                    }
                    .num{
                        font-size: .2rem;
                        font-family:PingFang SC;
                        font-weight:400;
                        color:rgba(117,117,117,1);
                        line-height: .4rem;
                         margin-left: .15rem;
                    }
                }

                .zan{
                    width: .6rem;
                    height: .6rem;
                    background: url("./../../../../assets/imgs/shop/zan.png") no-repeat 0 0;
                    background-size: .6rem .6rem;
                    position: absolute;
                    right: .13rem;
                    bottom: .13rem;
                }

                .goodsli_pricebox {
                    // margin-top: 0.06rem;

                    &>* {
                        float: left;
                    }

                    p {
                        font-size: 0.28rem;
                        color: rgba(219, 49, 42, 1);
                        // line-height: 0.61rem;
                        line-height: 0.51rem;
                        font-weight: bold;
                        height: 0.51rem;
                        margin-right: 0.14rem;
                    }

                    .bytips {
                        background-color: rgba(254, 216, 180, 1);
                        color: rgba(226, 99, 33, 1);
                        margin-top: 0.085rem;
                        margin-right: 0.13rem;
                        border-radius: 0.06rem;
                        font-size: 0.22rem;
                    }

                    .zstips {
                        border: 1px solid rgba(147, 90, 144, 1);
                        text-align: center;
                        line-height: 0.34rem;
                        color: rgba(147, 90, 144, 1);
                        border-radius: 50%;
                        width: 0.34rem;
                        height: 0.34rem;
                        margin-top: 0.085rem;
                        font-size: 0.12rem;
                    }
                }

                .goodsli_numberbox {
                    display: flex;
                    justify-content: space-between;
                    width: 2.8rem;
                    min-width: 140px;
                    flex-wrap: nowrap;
                    padding: 0.1rem 0rem;

                    span {
                        font-size: 0.22rem;
                        color: rgba(145, 145, 145, 1);
                        line-height: 0.29rem;
                        height: 0.29rem;
                    }
                }

                .goodsli_linksbox {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    height: 0.3rem;
                    box-sizing: border-box;
                    padding-right: 0.08rem;

                    .shop {
                        font-size: 0.22rem;
                        color: rgba(194, 107, 68, 1);
                        line-height: 0.3rem;
                        cursor: pointer;
                    }

                    .details {
                        font-size: 0.22rem;
                        color: rgba(147, 147, 147, 1);
                        line-height: 0.3rem;
                        cursor: pointer;
                    }
                }
            }

            .show-flag-goods {
                width: 3.45rem;
                min-height: 5.65rem;
                overflow: hidden;
                margin-bottom: 0.25rem;
                border-radius: .12rem;
                // background: rgba(255, 255, 255, 1) url("./img/dafult_zhuazhou.png") no-repeat 0 0;
                background: rgba(255, 255, 255, 1);
                background-size: 100% 100%;
                position: relative;
                float: left;
                cursor: pointer;
                .im {
                    width: 3.45rem;
                    height: 3.44rem;
                    border-radius: .12rem .12rem 0 0;
                    display: block;
                    overflow: hidden;
                    img {
                        width: 100%;
                        height: 100%;
                        border-radius: .12rem .12rem 0 0;
                    }
                }
                .tit {
                    display: block;
                    font-size: .26rem;
                    font-family: PingFang SC;
                    font-weight: bold;
                    color: rgba(31, 31, 31, 1);
                    margin-top: .22rem;
                    padding: 0 .2rem;
                    height: .7rem;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                }
                .price,
                .price_btm {
                    span{
                        font-size: .2rem;
                    }
                    font-size: .32rem;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: rgba(255, 91, 79, 1);
                    margin-top: .2rem;
                    padding-left: .2rem;
                }
        
                .price_btm {
                    font-size: .2rem;
                    color: rgba(117, 117, 117, 1);
                }
        
                .gd_btm {
                    margin-top: .36rem;
                    span {
                        display: inline-block;
                    }
                    .num {
                        font-size: .2rem;
                        font-family: PingFang SC;
                        font-weight: 400;
                        color: rgba(117, 117, 117, 1);
                        line-height: .4rem;
                        margin-left: .15rem;
                    }
                }
        
                .cang,
                .canged {
                    width: .4rem;
                    height: .4rem;
                    border-radius: 50%;
                    position: absolute;
                    right: .13rem;
                    bottom: .13rem;
                }
                .cang{
                    background: url("./../../../../assets/imgs/shop/cang.png") no-repeat 0 0;
                    background-size: .4rem .4rem;
                }
                .canged{
                    background: url("./../../../../assets/imgs/shop/canged.png") no-repeat 0 0;
                    background-size: .4rem .4rem;
                }
            }
        
            .show-flag-goods:nth-of-type(even) {
                margin-left: .2rem;
            }
        }
    }

    /*change big image btn*/
    .changebigsize,  
    .changesmallsize{
        width: .8rem;
        height: .8rem;
        border-radius:50%;
        position: fixed;
        right: .24rem;
        bottom: 2.47rem;
    }
    .changebigsize{ 
        background: url("./../../../../assets/imgs/shop/changebigsize.png") no-repeat 0 0;
        background-size: .8rem .8rem;
    }
    .changesmallsize{ 
        background: url("./../../../../assets/imgs/shop/changesmallsize.png") no-repeat 0 0;
        background-size: .8rem .8rem;
    }

    /*tuijian and zhibo list change big images*/
    .big_list{
        .goodslist {
            padding: 0 0 1.58rem;
            .goodsli {
                width: 7.1rem;
                height: 4rem;
                overflow: hidden;
                .im{
                    width: 7.1rem;
                    height: 4rem;
                    &>img {
                        width: 100%;
                    }
                }
                
                .tit{
                    bottom: 0.81rem;
                }

                .gd_btm{
                    bottom: 0.21rem;
                    margin-top: .36rem;
                }
            }
        }
    }

    /*touzijin list change big images*/
    .tzj-big-list{
        .goodslist {
            padding: 0 0 1.58rem;
            .show-flag-living {
                width: 7.1rem;
                height: 4rem;
                margin-top: 0;
                margin-bottom: .25rem;
                .im{
                    width: 7.1rem;
                    height: 4rem;
                    overflow: hidden;
                }

                .tit{
                    bottom: 0.81rem;
                }

                .gd_btm{
                    bottom: 0.21rem;
                    margin-top: .36rem;
                }
            }

            .show-flag-goods {
                width: 6.7rem;
                min-height: auto;
                padding: .2rem;
                .im {
                    width: 2.09rem;
                    height: 2.09rem;
                    border-radius: .12rem;
                }

                .tit {
                    position: absolute;
                    top: 0rem;
                    left: 2.3rem;
                    right: .2rem;
                }

                .price,
                .price_btm {
                    position: absolute;
                    bottom: .26rem;
                    left: 2.3rem;
                }
                .price{
                    bottom: .65rem;
                }
            }
            
            .show-flag-goods:nth-of-type(even) {
                margin-left: 0;
            }
        }
    }

    .radio-nav li,
    .nav_type li{
        display: inline-block;
        min-width: 1.32rem;
        padding: 0 .1rem;
        height: .52rem;
        line-height: .52rem;
        text-align: center;
        border-radius:.3rem;
        font-size: .24rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(117,117,117,1);
        background:rgba(235,235,233,1);
        margin-right: .2rem;
        margin: 0 .2rem .2rem 0;
        cursor: pointer;
    }

    .radio-nav li.active,
    .nav_type li.active{
        color:rgba(255,255,255,1);
        background:rgba(255,189,4,1);
    }
    .radio-nav li:last-child,
    .nav_type li:last-child{
        margin-right: 0;
    }


    /*xp list css*/
    .list{
        .goodslist_xp {
            padding-top: .2rem;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap; 
            background: rgba(247, 247, 247, 1);
            overflow: hidden;
            cursor: pointer;
            border-radius: .3rem .3rem 0 0;
        }
        
        .goodsli_xp {
            width: 3.45rem;
            height: 5.2rem;
            overflow: hidden;
            margin-bottom: 0.25rem;
            border-radius: .12rem;
            // background: rgba(255, 255, 255, 1) url("./img/dafult_zhuazhou.png") no-repeat 0 0;
            background: rgba(255, 255, 255, 1);
            background-size: 100% 100%;
            position: relative;
            float: left;
            cursor: pointer;
        }
        
        .goodsli_xp:nth-of-type(even) {
            margin-left: .2rem;
        }
        
        .goodsli_xp .im {
            width: 3.45rem;
            height: 3.44rem;
            border-radius: .12rem .12rem 0 0;
            display: block;
            overflow: hidden;
        }
        
        .goodsli_xp .im img {
            width: 100%;
            height: 100%;
            border-radius: .12rem .12rem 0 0;
        }
        
        .goodsli_xp .tit {
            display: block;
            font-size: .26rem;
            font-family: PingFang SC;
            font-weight: bold;
            color: rgba(31, 31, 31, 1);
            margin-top: .22rem;
            padding-left: .2rem;
            height: .7rem;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        
        .goodsli_xp .price,
        .price_btm {
            font-size: .32rem;
            font-family: PingFang-SC-Medium;
            font-weight: 500;
            color: rgba(255, 91, 79, 1);
            margin-top: .2rem;
            padding-left: .2rem;
            span{
                font-size: .2rem;
            }
        }
        
        .goodsli_xp .price_btm {
            color: rgba(117, 117, 117, 1);
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 80%;
            overflow: hidden;
            height: .3rem;
        }
        
        .goodsli_xp .gd_btm {
            margin-top: .36rem;
        }
        
        .goodsli_xp .gd_btm span {
            display: inline-block;
        }
        
        .goodsli_xp .gd_btm .num {
            font-size: .2rem;
            font-family: PingFang SC;
            font-weight: 400;
            color: rgba(117, 117, 117, 1);
            line-height: .4rem;
            margin-left: .15rem;
        }
        
        .goodsli_xp .cang,
        .goodsli_xp .canged {
            width: .4rem;
            height: .4rem;
            border-radius: 50%;
            position: absolute;
            right: .13rem;
            bottom: .13rem;
        }

        .goodsli_xp .cang{
            background: url("./../../../../assets/imgs/shop/cang.png") no-repeat 0 0;
            background-size: .4rem .4rem;
        }
        .goodsli_xp .canged{
            background: url("./../../../../assets/imgs/shop/canged.png") no-repeat 0 0;
            background-size: .4rem .4rem;
        }
    }
    /*xp change big image*/
    .xp_big_list{
        .goodsli_xp {
            width: 7.1rem;
            height: auto;
            padding: .2rem;
        }
        
        .goodsli_xp:nth-of-type(even) {
            margin-left: 0;
        }
        
        .goodsli_xp .im {
            width: 2.09rem;
            height: 2.09rem;
            border-radius: .12rem;
        }
        
        .goodsli_xp .im img {
            border-radius: .12rem;
        }
        
        .goodsli_xp .tit {
            position: absolute;
            top: 0rem;
            left: 2.3rem;
            right: .2rem;
        }
        
        .goodsli_xp .price,
        .price_btm {
            position: absolute;
            bottom: .26rem;
            left: 2.3rem;
        }
    }
    .xinpin-sort-filter{
        margin-top: .2rem;
        position: relative;
        .sort ul{
            overflow: hidden;
            li{ 
                display: inline-block;
                margin-right: .7rem;
                .t{
                    font-size: .24rem;
                    font-family:PingFang SC;
                    font-weight:500;
                    color:rgba(31,31,31,1);
                    .pricearrow_w{
                        display: inline-block;
                        width: .24rem;
                        height: .24rem;
                        vertical-align: middle;
                        margin : -0.03rem .05rem 0;
                        position: relative;
                        span{
                            display: inline-block;
                            width: .24rem;
                            height: .24rem;
                            background: url("./../../../../assets/imgs/shop/pricearrow.png") no-repeat 0 0;
                            background-size: .24rem .24rem;
                            position: absolute;
                            left: 0;
                            top: 0;
                        }
                        span.pricearrowupactive{
                            background: url("./../../../../assets/imgs/shop/pricearrowupactive.png") no-repeat 0 0;
                            background-size: .24rem .24rem;
                            top: 0;
                        }
                        span.pricearrowdownactive{
                            background: url("./../../../../assets/imgs/shop/pricearrowdownactive.png") no-repeat 0 0;
                            background-size: .24rem .24rem;
                            position: absolute;
                            bottom: 0;
                        }
                    }
                }
            }    
            li.active .t{
                color: rgba(255,189,4,1);
            }
        }

        .filter{
            position: absolute;
            right: .2rem;
            top: 0;
            .t{
                font-size: .24rem;
                font-family:PingFang SC;
                font-weight:500;
                color:rgba(31,31,31,1);
            }
            .ic{
                display: inline-block;
                width: .22rem;
                height: .24rem;
                overflow: hidden;
                vertical-align: middle;
                margin: -0.03rem 0 0 .1rem;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
    .rongtongjin-ad{
        min-height: .8rem;
        margin: .2rem;
        position: relative;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(31,31,31,1);
        background: url("./../../../../assets/imgs/shop/bg-rongtongjin.png") no-repeat 0 0;
        background-size: 7.1rem .8rem;
        span{
            display: block;
        }
        .ad-tit{
            width: .96rem;
            height: .29rem;
            position: absolute;
            left: .24rem;
            top: .26rem;
        }
        .add-con{
            padding: .21rem 0 0 1.4rem;
            font-size: .28rem;
            overflow: hidden;
            position: relative;
            span{
                display: inline-block;
            }
            .slide-box{
                height: .36rem;
                overflow: hidden;
                position: absolute;
                top: .2rem;
                left: 2.8rem;
            }
            .jin-annimation-down{
                position: relative;
                top: -0.36rem;
                -webkit-animation-name: jin-annimation-down;
                -webkit-animation-duration: 5s;
                -webkit-animation-iteration-count: infinite;
                -webkit-animation-timing-function: linear;
            }

            @-webkit-keyframes jin-annimation-down {
                0,80%{
                    top: -0.36rem;
                }
                90%{
                    top: -0.36rem;
                }
                100%{
                    top: 0rem;
                }
            }

            .jin-annimation-up{
                position: relative;
                bottom: 0;
                left: 0;
                -webkit-animation-name: jin-annimation-up;
                -webkit-animation-duration: 5s;
                -webkit-animation-iteration-count: infinite;
                -webkit-animation-timing-function: linear;
            }

            @-webkit-keyframes jin-annimation-up {
                0,80%{
                    bottom: 0rem;
                }
                90%{
                    bottom: 0rem;
                }
                100%{
                    bottom: .32rem;
                }
            }

            .jin-annimation{
                
            }
            .role-type-up{
                color: rgba(255, 90, 0, 1);
            }
            .role-type-down{
                color:rgba(84,138,0,1);
            }
            .role-type-level{
                color:rgba(31, 31, 31, 1);
            }
            .ic{
                width: .17rem;
                height: .22rem;
                margin-left: .1rem;
                vertical-align: baseline;
            }
        }

        .ad-jin{
            width: 2.14rem;
            height: .94rem;
            position: absolute;
            right: 0;
            top: -.14rem;
        }

        img{
            width: 100%;
        }
    }

    .bangdanguild{
        padding: 0 .2rem;
        display: flex;
        flex-wrap: nowrap;
        margin-top: .4rem;
        overflow: hidden;
        .lis{
            width: 3.45rem;
            height: .77rem;
            padding: .3rem 0 0 .31rem;
            flex: 1;
            justify-content: space-around;
            cursor: pointer;
            .t{
                font-size: .36rem;
                font-family:PingFang SC;
                font-weight:bold;
                color:rgba(255,255,255,1);
            }
            .ic{
                display: inline-block;
                width: .12rem;
                height: .23rem;
                margin-left: .1rem;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .tuhao{
            background: url("./../../../../assets/imgs/shop/tuhao.png") no-repeat 0 0;
            background-size: 3.45rem 1.07rem;
        }
        .zhubo{
            margin-left: .2rem;
            background: url("./../../../../assets/imgs/shop/zhubo.png") no-repeat 0 0;
            background-size: 3.45rem 1.07rem;
        }
    }


    
    .xiuchang{
        margin-top: 0.4rem;
        .xclist{
            .goodslist{
                .goodsli{
                    margin-top: 0;
                    margin-bottom: .2rem;
                    cursor: pointer;
                    .im{
                        border-radius: .24rem .24rem .12rem .12rem;
                        img{
                            border-radius: .24rem .24rem .12rem .12rem;
                        }
                    }
                    .tit{
                        left: .15rem;
                        color:rgba(255,255,255,1);
                    }
                    .goodsli_title{
                        left: .15rem;
                        bottom: .23rem;
                        top: initial;
                        height: .35rem;
                        h2{
                            font-size: .22rem;
                            height: auto;
                            line-height: initial;
                        }
                        h2.indent{
                            text-indent: .4rem;
                            color:rgba(255,255,255,1);
                            width: 2.1rem;
                        }
                        .img_w{
                            width: .35rem;
                            height: .35rem;
                            top: -.02rem;
                            overflow: hidden;
                        }
                    }
                    .gd_btm{
                        right: .15rem;
                        bottom: .23rem;
                        text-align: right;
                        .num{
                            line-height: initial;
                            color:rgba(255,255,255,1);
                            font-weight:500;
                        }
                    }
                    .stateflag{
                        position: absolute;
                        right: .15rem;
                        top: .15rem;
                        span{
                            display: inline-block;
                        }
                        .huifang,
                        .zb{
                            width: .96rem;
                            height: .3rem;
                            vertical-align: middle;
                        }
                        .zb{
                            background: url("./../../../../assets/imgs/shop/zhibo.png") no-repeat 0 0;
                            background-size: .96rem .3rem;
                        }
                        .huifang{
                            background: url("./../../../../assets/imgs/shop/huifang.png") no-repeat 0 0;
                            background-size: .96rem .3rem;
                        }
                        .num{
                            font-size: .2rem;
                            font-family:PingFang SC;
                            font-weight:400;
                            color:rgba(117,117,117,1);
                            line-height: .4rem;
                            margin-left: .15rem;
                        }
                    }
                }
            }  
        }
    } 
    
    .radiolist {
        margin-top: 0.4rem;
        .dtlist{
            .radiolist {
                .lis{
                    min-height: 1.46rem;
                    position: relative;
                    font-family: PingFang SC;
                    margin-bottom: .22rem;
                    cursor: pointer;
                    position: relative;
                    .livecover{
                        width: 7.1rem;
                        height: 1.46rem;
                        position: absolute;
                        border-radius: .13rem;
                        z-index: 1;
                        img{
                            width: 100%;
                            height: 100%;
                            border-radius: .13rem;
                        }
                    }
                    .livecon{
                        width: 7.1rem;
                        height: 1.46rem;
                        position: absolute;
                        z-index: 2;
                        display: flex;
                        flex-direction: row;
                        .im{
                            display: inline-block;
                            width: .85rem;
                            height: .85rem;
                            margin: .31rem 0 0 .3rem;
                            border-radius: 50%;
                            background: #ccc;
                            img{
                                width: 100%;
                                height: 100%;
                                border-radius: 50%;
                            }
                        }
                        .details{
                            padding: .36rem 0 0 .2rem;
                            .t{
                                font-size: .28rem;
                                font-weight: bold;
                                color: #1F1F1F;
                            }
                            .data{
                                display: flex;
                                flex-direction: row;
                                padding-top: .12rem;
                                .ic{
                                    display: inline-block;
                                    height: .35rem;
                                    width: auto;
                                    img{
                                        height: 100%;
                                        width: auto;
                                    }
                                }
                                .num{
                                    font-size: .22rem;
                                    font-weight: 500;
                                    color: #757575;
                                    margin-left: .2rem;
                                }
                            }
                        }
                        .hot{
                            display: block;
                            width: .4rem;
                            height: .48rem;
                            position: absolute;
                            right: .27rem;
                            top: 50%;
                            transform: translateY(-50%);
                            img{
                                width: 100%;
                                height: 100%;
                            }
                        }
                    }
                }
                .lis.radiobg_0{
                    background: url("./../../../../assets/imgs/living/radiodetails/radiobg_0.png") no-repeat 0 0;
                    background-size: 7.1rem 1.46rem;
                }
                .lis.radiobg_1{
                    background: url("./../../../../assets/imgs/living/radiodetails/radiobg_1.png") no-repeat 0 0;
                    background-size: 7.1rem 1.46rem;
                }
                .lis.radiobg_2{
                    background: url("./../../../../assets/imgs/living/radiodetails/radiobg_2.png") no-repeat 0 0;
                    background-size: 7.1rem 1.46rem;
                }
            }
        }
    }
    
}
/*new commer*/
.newcomerindexguild{
    padding : .35rem 0 0;
    img{
        width: 100%;
    }
}

/*xin pin shai xuan tan ceng*/

.filter_tan{
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    // display: none;
    .bg_cover{
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,.75);
        z-index: 10001;
    }
    .price_area{
        width: 5.62rem;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 10002;
        background: #fff;
        .price-space{
            display: inline-block;
            font-size: .3rem;
            font-family:PingFang SC;
            font-weight:500;
            color:rgba(31,31,31,1);
            margin: .71rem 0 0 .2rem;
        }

        .t{
            margin: 0 0.2rem;
        }
        .t input{
            background:none;
            outline:none;
            border:0px;
            display: inline-block;
            width: 2.02rem;
            height: .52rem;
            line-height: .52rem;
            font-size: .22rem;
            font-family:PingFang SC;
            font-weight:500;
            color:rgba(191,191,191,1);
            background:rgba(235,235,233,1);
            text-align: center;
            border-radius: .3rem;
            margin: .3rem 0;
        }
        .t input[type="text"]:focus {
            color: #3c3c3d;
            outline: none;
        }
        .t .line{
            display: inline-block;
            width: .6rem;
            height:1px;
            background: rgba(191,191,191,1);
            margin: 0 .29rem;
            vertical-align: middle;
        }
        ul{
            padding: 0 .2rem;
            overflow-y: scroll;
            li{
                width: 1.61rem;
                height: .6rem;
                line-height: .6rem;
                text-align: center;
                font-size: .24rem;
                font-family:PingFang SC;
                font-weight:500;
                color:rgba(117,117,117,1);
                background:rgba(247,247,247,1);
                border-radius: .12rem;
                margin: .19rem .19rem 0 .19rem ;
                float: left;
            }
            li:nth-last-of-type(even){
                float: right;
            }
            li:nth-last-of-type(odd){
                float: left;
            }
            li.active{
                color:rgba(255,189,4,1);
            }
        }    
        .btn_area{
            position: absolute;
            left: .91rem;
            right: .91rem;
            bottom: .24rem;
        }
        .btn_area span{
            display: inline-block;
            width:1.6rem;
            height: .6rem;
            line-height: .6rem;
            text-align: center;
            font-size: .26rem;
            font-family:PingFang SC;
            font-weight:500;
            color:rgba(255,189,4,1);
            border:1px solid rgba(255,189,4,1);
            border-radius: .3rem;
        }
        .btn_area span.s{
            color:rgba(254,254,254,1);
            background:rgba(255,189,4,1);
            margin-left: .5rem;
        }
    }
}

